<template>
	<div v-if="user" v-my-directive data-title="用户中心" class="usermain">
		<!-- 左边 -->
		<userleft></userleft>
		<div class="CatalogLayout">
			<!-- 引入文件的方式 -->

			<div class="Genericpadding bold">我的课程</div>
			<div class="Genericpadding helf interval CatalogLayout">
				<div v-if="list.length > 0" v-for="(item, index) in list" :key="index" class="row">
					<el-image :src="item.thumbnail">
						<template #placeholder>
							<div class="image-slot">
								<el-icon><Loading /></el-icon>
							</div>
						</template>
						<template #error>
							<div class="image-slot">
								<el-icon><PictureFilled /></el-icon>
							</div>
						</template>
					</el-image>
					<div style="flex-grow: 1" class="column">
						<div class="row">
							<el-tag size="small" effect="plain">{{ item.pidname }}</el-tag>
							<div class="coursetitle"> {{ item.title }}</div>
						</div>
						<div class="rows">
							<div class="row">
								<el-avatar size="small" :src="item.user.Avatar" />
								<div class="center">{{ item.user.nickname ? item.user.nickname : item.user.username }}</div>
							</div>
							<div class="left center">{{ item.Creationtime }}</div>
						</div>
					</div>
					<router-link :to="'/course/' + item.alias + '/' + item.id"><el-button class="center" size="small" type="danger">继续学习</el-button></router-link>
				</div>
				<div v-else class="dispaygrid">
					<span style="color: #909399" class="center">暂无数据</span>
				</div>
				<div class="dispaygrid">
					<el-pagination background small class="centerend" :hide-on-single-page="onsingle" :current-page="curPage" @current-change="page" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { dataRequest as api } from '@/api/api'
	import userleft from './../components/userleft'
	import { mapState } from 'vuex'
	export default {
		name: 'name',
		components: {
			// 组件
			userleft,
		},
		computed: {
			...mapState(['logon', 'user']),
		},
		data() {
			return {
				//返回值
				onsingle: true,
				curPage: 1,
				pagesize: 5, //每页显示数量
				total: 0,
				offset: 'DESC',
				list: [],
			}
		},
		methods: {
			// 函数
			async getdata() {
				let array = await api(['myCourseonpage', { perPage: this.pagesize, page: this.curPage, offset: this.offset }])
				if (array.code == 200) {
					this.list = array.data
					this.total = array.massage / 1
				} else {
					this.list = []
					this.total = 0
				}
			},
			// fenye
			page(ele) {
				this.loading = true
				this.curPage = ele
				this.getdata()
			},
		},
		mounted() {
			// 生命周期:
			this.getdata()
		},
	}
</script>
<style scoped>
	.coursetitle {
		color: #303133;
		font-weight: bold;
	}
	.el-image {
		width: 80px !important;
		height: 80px !important;
		border-radius: 4px;
	}
	.row {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}
	.rows {
		display: flex;
		flex-direction: row;
		place-content: space-between;
		font-size: 14px;
		color: #909399;
	}
	.column {
		display: flex;
		flex-direction: column;
		place-content: space-between;
		padding: 5px 0;
	}
	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 20px;
	}
	@media screen and (max-width: 860px) {
		.coursetitle {
			width: 1rem;
			color: #303133;
			font-size: 10px;
			font-weight: bold;
			white-space: nowrap; /* 防止换行 */
			overflow: hidden; /* 超出部分隐藏 */
			text-overflow: ellipsis; /* 显示省略号 */
		}
		.el-image {
			width: 0.7rem !important;
			height: 0.7rem !important;
			border-radius: 0.04rem;
		}
	}
</style>
